<template>
  <div class="app-container">
    <u-page-config
      :filter-array="filterArray"
      v-model="filter"
      label-width="100px"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      :showTool="false"
      @deviceDetail="deviceDetail"
    >

      <template #patrolStatus="{row, item}">
        <el-tag size="small" effect="dark" :type="row.patrolStatus === 0 ? 'success' : 'danger'">
          {{ getDictLabel(patrolStatusOptions, row.patrolStatus) }}
        </el-tag>
      </template>
    </u-page-config>
  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import UForm from '@/components/uForm'
import table from '@/mixin/uTable';
import {getPatrolList} from '@/api/operationAndMonitoring/devicePatrolRecords'

export default {
  name: "DevicePatrolRecords",
  mixins: [table],
  components: {UPageConfig, UForm},
  data() {
    return {
      patrolStatusOptions: [
        {label: '正常', value: 0},
        {label: '异常', value: 1},
      ],
      filterArray: [
        {label: "设备部署名称", key: "deploymentName", type: "input"},
        {label: "设备ID", key: "deviceId", type: "input"},
        {label: "自检状态", key: "patrolStatus", type: "select"},
      ],
      tableColumn: [
        {label: "设备ID", prop: "deviceId"},
        {label: "设备部署名称", prop: "deploymentName"},
        {label: "设备型号", prop: "deviceName"},
        {label: "自检状态", prop: "patrolStatus", type: "slot", slot: 'patrolStatus'},
        {label: "自检失败信息", prop: "message", showOverflowTooltip: true},
        {label: "自检时间", prop: "createTime", type: 'time'},
        {
          label: "操作", type: "btn", attr: {width: 100}, btnArr: [
            {icon: "el-icon-view", text: "设备详情", emit: "deviceDetail"},
          ],
          permissions: 'operationAndMonitoring:deviceMonitoringDetail:index'
        }
      ],
      detailArray: [
        {label: "工单ID：", key: "id", col: 12, type: "text",},
        {label: "设备ID：", key: "deviceId", col: 12, type: "text",},
        {label: "设备部署名称：", key: "deploymentName", col: 12, type: "text", placeholder: ' '},
      ],
    };
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.getInit(getPatrolList, {})
    },
    /** 详细按钮操作 */
    deviceDetail(row) {
      this.$router.push({
        name: 'DeviceMonitoringDetail',
        query: {
          deviceId: row.deviceId
        }
      })
    },

  },
  created() {
    // 设置自检状态选项
    try {
      this.filterArray.find(item => item.key === 'patrolStatus').options = this.patrolStatusOptions;
    } catch (e) {
      console.log("找不到对应表单项", e)
    }
  },
  watch: {},
}
</script>

<style lang="scss" scoped>
.form-item-wrap {
  display: flex;
}
</style>
